<template>
  <div class="x-bar">
    <div :id="id" :option="option":class="className" :style="{height:height,width:width}"></div>
  </div>
</template>
<script>
  import HighCharts from 'highcharts'
  import resize from './mixins/resize'
  export default {
    mixins: [resize],
    // 验证类型
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      }
    },
    data() {
      return {
        id: 'column1',
        option: {
          chart: {
            type: 'column',
            backgroundColor: 'rgba(0,0,0,0)',
            options3d: {
              enabled: true,
              alpha: 15,
              beta: 15,
              viewDistance: 25,
              depth: 40
            },
            marginTop: 80,
            marginRight: 40
          },
          title: {
            text: '无损检测',
            style: {
              color: 'white'
            }
          },
          xAxis: {
            categories: ['桥式起重机', '门式起重机', '塔式起重机', '门座起重机', '架桥机'],
            labels: {
              style: {
                color: 'white'
              }
            }
          },
          yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
              text: '报告数量',
              style: {
                color: 'white'
              }
            },
            labels: {
              style: {
                color: 'white'
              }
            }
          },
          tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
          },
          plotOptions: {
            column: {
              stacking: 'normal',
              depth: 40
            }
          },
          // xAxis: {//x轴显示的内容
          //   categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          //   plotbands:[{//可以显示一个方块，如果需要的话可以更改透明度和颜色
          //     from:4.5,
          //     to:6.5,
          //     color: 'rgba(68,170,213,0)'//透明度和颜色
          //   }]
          // },
          //
          // yAxis: {//y轴显示的内容
          //   title: {
          //     text: '气温 (°C)'
          //   }
          // },
          // plotOptions: {
          //   line: {
          //     dataLabels: {
          //       enabled: true // 开启数据标签
          //     },
          //     enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          //   }
          // },
          series: [{
            name: '磁粉检测',
            data: [10, 1, 2, 3, 1],
            stack: '磁粉检测',
            zones: [{
              color: '#C1232B'
            }]
          }, {
            name: '超声检测',
            data: [1, 2, 4, 1, 3],
            stack: '超声检测',
            zones: [{
              color: '#E87C25'
            }]
          }, {
            name: '其他检测',
            data: [1, 5, 2, 1, 1],
            stack: '其他检测',
            zones: [{
              color: '#26C0C0'
            }]
          }]
        }
      }
    },
    mounted() {
      HighCharts.chart(this.id, this.option)
    }
  }
</script>
